<template>
  <PageWrapper>
    <a-card>
      <div style="margin-bottom: 20px; padding: 20px">
        <a-form :model="formState">
          <a-row :gutter="[20, 20]">
            <a-col :xs="24" :sm="6">
              <a-form-item :label="t('sys.analysis.columns.mac')">
                <a-input
                  allowClear
                  :placeholder="t('sys.configuration.pleaseenter') + t('sys.analysis.columns.mac')"
                  v-model:value="formState.mac"
                />
              </a-form-item>
            </a-col>
            <a-col :xs="24" :sm="6">
              <a-space>
                <a-button @click="handleSearch" :icon="h(SearchOutlined)" type="primary">
                  {{ t('sys.form.placeholder.inquire') }}
                </a-button>
              </a-space>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <a-table
        :loading="taskStatisticLoading"
        :pagination="queryDeviceNonodepagination"
        :columns="taskStatisticColumns"
        :dataSource="taskStatisticDataSource"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex === 'status'">
            <a-tag v-if="record.status === 'success'" color="green">成功</a-tag>
            <a-tag v-else-if="record.status === 'fail'" color="red">失败</a-tag>
            <span v-else>{{ record.status }}</span>
          </template>
          <template v-if="column.dataIndex === 'action'">
            <a-button @click="taskStatisticDdetailsClick(record)" type="link">
              {{ t('sys.device.columns.log') }}
            </a-button>
          </template>
        </template>
      </a-table>
    </a-card>

    <!-- 详情模态框 -->
    <a-modal
      v-model:open="taskLogModalVisible"
      :title="`${t('sys.device.columns.log')}`"
      width="800px"
      :ok-text="t('sys.configuration.comfig')"
      :cancel-text="t('sys.configuration.cancel')"
    >
      <a-table
        :loading="taskLogListLoading"
        :pagination="queryDeviceNodeTaskLogpagination"
        :columns="taskLogListColumns"
        :dataSource="taskLogListDataSource"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex === 'status'">
            <a-tag v-if="record.status === 'success'" color="green">成功</a-tag>
            <a-tag v-else-if="record.status === 'fail'" color="red">失败</a-tag>
            <a-tag v-else-if="record.status === 'running'" color="blue">运行中</a-tag>
            <span v-else>{{ record.status }}</span>
          </template>
        </template>
      </a-table>
    </a-modal>
  </PageWrapper>
</template>

<script lang="ts" setup>
  import { ref, onMounted, h, UnwrapRef, Ref } from 'vue';
  import { SearchOutlined, DeleteOutlined } from '@ant-design/icons-vue';
  import { queryDeviceNodeTaskStatisticList, queryDeviceNodeTaskLogList } from '@/api/demo/device';
  import { PageWrapper } from '@/components/Page';
  import { useI18n } from '@/hooks/web/useI18n';

  const { t } = useI18n();
  const taskLogListColumns = [
    { title: t('sys.analysis.columns.mac'), dataIndex: 'mac', key: 'mac' },
    { title: t('sys.analysis.columns.node'), dataIndex: 'node', key: 'node' },
    {
      title: t('sys.analysis.columns.taskBeginTime'),
      dataIndex: 'taskBeginTime',
      key: 'taskBeginTime',
    },
    { title: t('sys.analysis.columns.taskEndTime'), dataIndex: 'taskEndTime', key: 'taskEndTime' },
  ];
  const taskLogListLoading = ref(false);
  const queryDeviceNodeTaskLogpagination = ref({
    total: 0,
    current: 1,
    pageSize: 10,
  });
  const taskLogListDataSource = ref([]);
  const formState = ref({});
  const handleSearch = () => {
    init();
  };
  const queryDeviceNonodepagination = ref({
    total: 0,
    current: 1,
    pageSize: 10,
  });
  const taskStatisticDataSource = ref([]);
  const taskStatisticLoading = ref(false);
  const taskStatisticColumns = [
    { title: t('sys.analysis.columns.mac'), dataIndex: 'mac', key: 'mac' },
    { title: t('sys.analysis.columns.node'), dataIndex: 'node', key: 'node' },

    { title: t('sys.analysis.columns.createTime'), dataIndex: 'createTime', key: 'createTime' },
    {
      title: t('sys.analysis.columns.executeNumber'),
      dataIndex: 'executeNumber',
      key: 'executeNumber',
    },
    {
      title: t('sys.analysis.columns.recentExecuteTime'),
      dataIndex: 'updateTime',
      key: 'updateTime',
    },
    { title: '操作', dataIndex: 'action', key: 'action' },
  ];
  const selectedTaskRecord = ref({});
  const taskLogModalVisible = ref(false);
  const loadTaskLogListData = (taskId) => {
    taskLogListLoading.value = true;
    queryDeviceNodeTaskLogList({
      current: queryDeviceNodeTaskLogpagination.value.current,
      size: queryDeviceNodeTaskLogpagination.value.pageSize,
      taskStatisticId: selectedTaskRecord.value?.id || '',
    }).then((res) => {
      if (res.code == 200) {
        taskLogListDataSource.value = res.data.records;
        queryDeviceNodeTaskLogpagination.value.total = res.data.total;
      }
      taskLogListLoading.value = false;
    });
  };
  const taskStatisticDdetailsClick = (record) => {
    selectedTaskRecord.value = record;
    taskLogModalVisible.value = true;
    loadTaskLogListData(record.taskId);
  };

  const init = () => {
    taskStatisticLoading.value = true;
    queryDeviceNodeTaskStatisticList({
      current: queryDeviceNonodepagination.value.current,
      size: queryDeviceNonodepagination.value.pageSize,
      ...formState.value,
    }).then((res) => {
      if (res.code == 200) {
        taskStatisticDataSource.value = res.data.records;
        queryDeviceNonodepagination.value.total = res.data.total;
      }
      taskStatisticLoading.value = false;
    });
  };
  onMounted(() => {
    init();
  });
</script>
<style scoped lang="scss">
  .status-label {
    width: 100px;
  }
</style>
